<template>
<div>
    <div class="top" :style="{background:color}" >
        <i @click='back' :style="{backgroundImage:bgUrl}"></i>
        <div :title='title' :style="{color:fontColor}">{{ title }}</div>
    </div>

</div>
</template>

<script>
export default {
 data () {
    return {

    }
 },
 props:{
        title:{
            default: '搜索页'
        },
        color:{
            default:'#fff'
        },
        fontColor:{
            default:'#000'
        },
        bgUrl:{
            default:'url("")'
        }
    },
    mounted () {
        
    },
    methods:{
        back(){
            this.$router.go(-1)
        }
    }
}
</script>

<style lang='scss' scoped>
.top{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    position:relative;
    font-size: 14px;
    align-items: center;
    i{
        position: absolute;
        background-image:url("");
        background-repeat: no-repeat; 
        left: 0px;
        width: 40px;
        height: 50px;
        background-size: 20% 30%;
        background-position: center;
        transform: rotate(180deg)
    }
}

</style>

